<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="../../iconfont/iconfont.css">

    <style>
        html {
            font-size: 26.666667vw;
        }

        body {
            font-size: 32px;
        }

        .head {
            height: 86px;
            background-color: #ef1b1a;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .head div i {
            font-size: 36px;
        }

        .head-user .head-email {
            width: 25%;
        }

        .head-logo {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .head-logo img {
            height: 86px;
        }

        .head-email {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }


        .nav {
            height: 92px;
            border-bottom: 1px #ededed solid;
            padding: 0 20px;
            display: flex;
            align-items: center;
            font-size: 36px;
        }

        .nav li {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .nav li.active {
            color: #333;
        }

        .nav li.active::after {
            content: "";
            position: absolute;
            left: 50%;
            margin-left: -15px;
            bottom: -24px;
            width: 30px;
            height: 4px;
            background-color: #ef191b;
        }


        .nav-sub {
            padding: 22px 20px 14px 20px;
            background-color: #f8f8f8;
            position: relative;
        }

        .nav-sub-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-auto-rows: 70px;
        }

        .nav-sub_closed {
            height: 140px;
            overflow: hidden;
        }

        .nav-sub_closed + .nav-sub-arrow {
            transform: rotate(0deg);
        }

        .nav-sub-arrow {
            position: absolute;
            right: 20px;
            bottom: 40px;
            transform: rotate(180deg);
        }

        .nav-sub-arrow i {
            font-size: 44px;
        }
    </style>


</head>
<body>
<div class="head">
    <div class="head-user">
        <i class="iconfont icon-user"></i>
    </div>

    <div class="head-logo">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.7M15LYI1lWdDG64IsAdpGwHaHZ?w=206&h=205&c=7&r=0&o=5&dpr=2&pid=1.7"
             alt=""></img>
    </div>

    <div class="head-email">
        <i class="iconfont icon-email"></i>
        邮箱
        <i class="iconfont icon-a-1xia_down"></i>
    </div>
</div>

<ul class="nav">
    <li class="actives">
        <a href="">要闻</a>
    </li>
    <li class="actives">
        <a href="">推荐</a>
    </li>
    <li class="active">
        <a href="">原创</a>
    </li>
    <li class="actives">
        <a href="">热点</a>
    </li>
</ul>


<div class="nav-sub">
    <ul class="nav-sub-list nav-sub_closed">
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
        <li>
            <a href="">新闻</a>
        </li>
    </ul>

    <div class="nav-sub-arrow ">
        <i class="iconfont icon-a-1xia_down"></i>
    </div>
</div>

</body>
</html>
